<template>
  <el-dialog title="Category list" :visible="true" @close="closeCategoryDialog">
    <div class="tagsBox">
      <div class="selected">
        <div class="title"><span>APPLIED Category</span></div>
        <p v-if="Object.keys(selectedObj).length === 0" class="tip">
          Select previously used category from the list below to add them to
          this product.
        </p>
        <div v-else class="tagList">
          <el-tag
            :closable="true"
            size="medium"
            class="tagItem"
            type="primary"
            @close="cancelSelect(selectedObj.id)"
          >
            {{ selectedObj.name }}
          </el-tag>
        </div>
      </div>
      <div class="awiting">
        <div class="awitingLeft">
          <div class="title">
            <span>ALL Category</span>
            <div class="btns">
              <el-button
                type="text"
                @click="closable = !closable"
              >delete</el-button>
            </div>
          </div>
          <div class="tagList">
            <el-tag
              v-for="(item, index) in categoryList"
              :key="item.id"
              size="medium"
              class="tagItem"
              :closable="closable"
              :type="selectedIndex === index ? 'info' : 'primary'"
              @click="
                selectedIndex === index ? '' : selectCategory(item, index)
              "
              @close="productCategoryDelete(item.id, index)"
            >
              {{ item.name }}
            </el-tag>
          </div>
        </div>
        <div class="awitingright">
          <el-form v-model="form">
            <el-form-item>
              <el-input v-model="form.name" placeholder="name" />
            </el-form-item>
            <el-form-item style="text-align:right;">
              <el-button
                v-preventReClick
                type="primary"
                :disabled="!form.name"
                @click="addData"
              >Add</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeCategoryDialog">Cancle</el-button>
      <el-button
        :disabled="Object.keys(selectedObj).length === 0"
        type="primary"
        @click="emitData"
      >Confirm</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  productCategoryList,
  productCategoryAdd,
  productCategoryDelete
} from '@/api/product';
export default {
  props: {
    storeId: {
      type: Number,
      required: true
    },
    // eslint-disable-next-line vue/require-prop-types
    selectedId: {
      required: true
    }
  },
  data() {
    return {
      categoryList: [],
      selectedObj: {},
      selectedIndex: null,
      closable: false,
      form: {}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      productCategoryList({ storeId: this.storeId, parentId: 0 }).then(res => {
        this.categoryList = res.data;
        this.$emit('setCategoryList', res.data);
        if (typeof this.selectedId === 'number') {
          res.data.forEach((item, index) => {
            if (item.id === this.selectedId) {
              this.selectedObj = item;
              this.selectedIndex = index;
            }
          });
        } else if (typeof this.selectedId === 'string') {
          res.data.forEach((item, index) => {
            if (item.name === this.selectedId) {
              this.selectedObj = item;
              this.selectedIndex = index;
            }
          });
        }
      });
    },
    productCategoryList() {
      productCategoryList({ storeId: this.storeId, parentId: 0 }).then(res => {
        this.categoryList = res.data;
        this.$emit('setCategoryList', res.data);
      });
    },
    addData() {
      productCategoryAdd({
        isLeaf: 0,
        name: this.form.name,
        parentId: 0,
        storeId: this.storeId
      }).then(res => {
        if (res.code === 200) {
          this.form = {};
          this.$message.success(res.message);
          this.productCategoryList();
        }
      });
    },
    productCategoryDelete(id, index) {
      productCategoryDelete([id]).then(res => {
        if (res.code === 200) {
          this.$message.success(res.message);
          if (Object.keys(this.selectedObj).length !== 0) {
            // 有已选中
            if (this.selectedIndex === index) {
              this.selectedIndex = null;
              this.selectedObj = {};
            } else if (index < this.selectedIndex) {
              this.selectedIndex -= 1;
            }
          }
          this.productCategoryList();
        }
      });
    },
    selectCategory(item, index) {
      this.selectedObj = item;
      this.selectedIndex = index;
    },
    cancelSelect(id, index) {
      // 取消选中
      this.selectedObj = {};
      this.selectedIndex = null;
    },
    emitData() {
      this.$emit('getSelectedCategory', this.selectedObj.id);
    },
    closeCategoryDialog() {
      let haveSelected = true;
      if (this.selectedIndex === null) {
        haveSelected = false;
      }
      this.$emit('closeCategoryDialog', haveSelected);
    }
  }
};
</script>
<style lang="scss" scoped>
.tagsBox {
  > div {
    border-top: 1px solid #ddd;
    padding: 15px 0;
    &.awiting {
      display: flex;
      justify-content: space-between;
      padding-bottom: 0;
      .awitingLeft {
        flex: 1;
        margin-right: 15px;
        padding-right: 15px;
        border-right: 1px solid #ddd;
      }
      .awitingRight {
        width: 230px;
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      > span {
        font-weight: 600;
      }
      .btns {
        float: right;
      }
    }
    .tagList {
      max-height: 200px;
      overflow-y: scroll;
      .tagItem {
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
      }
      .el-tag.el-tag--info {
        cursor: default;
      }
    }
  }
}
</style>
